<template>
	<view>

		<view class="top">

			<uni-easyinput style="width: 90%; position: relative;top: 40rpx; left: 50rpx; border-radius: 30rpx;"
				placeholder="请输入要输入的内容" suffixIcon="search">
			</uni-easyinput>

			<h4 style="margin-top: 50rpx;" class="list-title">历史记录：</h4>
			<ul style="margin-top: 0rpx; margin-left: 200rpx;" class="horizontal-list">
				<li v-for="(item, index) in arr" :key="index" class="list-item">
					{{ item }}
				</li>
			</ul>
		</view>



		<uni-card v-for="(item,index) in shoplist" :index="index" :key="index"
			style="position: relative; top: -100rpx;">
			<navigator :url="`../xiche/xiche?id=${item.shopId}`">
					<view style="display: flex; justify-content: space-between; width: 100%;">
				<view style="font-weight: 500;">{{item.shopName}}</view>
				<view style="color: skyblue;">{{item.star}}m</view>


			</view>



			<view style="display: flex;">

				<!-- 	<uni-rate :touchable="false" :value="5" @change="onChange" />   -->
				<uni-rate :touchable="false" :value="item.star" @change="onChange" class="small-rate" />
				<view style="margin-left: 40rpx;">销量：{{item.sales}}</view>
			</view>

			<view style="width: 100%;display: flex;">
				<image style="height:130rpx; width: 200rpx;" src="../../../static/7fd1b81f3c559caabc335ad7ef2ef2f.png">
				</image>
				<view style="height: 120rpx; margin-left: 50rpx;">
					<view style="font-size: 25rpx;"> 营业时间: {{item.startTime}}---{{item.endTime}}</view>
					<view style="font-size: 25rpx;">{{item.shopAddress}}</view>




				</view>




			</view>

				
				
			</navigator>
		

		</uni-card>




		</uni-card>








	</view>
</template>

<script>
	export default {
		data() {
			return {
				markerslist:'',
			



				longitude: '',
				latitude: '',
				cheShop: '',
				shoplist: '',

				yvli: 11,
				xiaoliang: 666,
				fenshu: 4,
				arr: ['苹果', '香蕉', '橙子', '葡萄'] // 你的数组

			}
		},

		onLoad() {
			this.getshoplist()
		
		},


		methods: {
			
		
			
			


			getMyPosition() {
				let that = this
				uni.getLocation({
					success(res) {
						// console.log("定位==========")
						// console.log(res)
						that.latitude = res.latitude
						that.longitude = res.longitude
					

						console.log("当地的经纬度")
						console.log(res.latitude)
						console.log(res.longitude)


					},
					fail() {
						alert("定位失败")
					}
				})
			},




			getshoplist() {
				let that = this
			
				this.$http({
				
					url: 'api/shop/shop/list',
					method: 'get',
					data: that.cheShop,
					success(res) {
						console.log(res)
						that.shoplist = res.data.rows
						console.log(that.shoplist)
						
						
						const markers = [];
							for (let i = 0; i < that.shoplist.length; i++) {
							    const shop = that.shoplist[i];
							    markers.push({
							        id: shop.shopId,
							        latitude: shop.latitude,
							        longitude: shop.longitude,
						
							    });	
						};
						
						console.log("aaaaaaaaaaaaallllllllllll")
						console.log(markers)
						that.markerslist=markers
						
						
						
					}

				})


			},





			onChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				// console.log(this.rateValue);
			}



		}
	}
</script>

<style>
	/* 自定义星星大小 */
	.small-rate>>>.uni-icons {
		font-size: 10px;
		/* 调整星星的大小 */
	}

	/* 自定义extra文本颜色 */
	.uni-card__header-extra-text {
		color: #add8e6;
		/* 浅蓝色 */
	}




	.horizontal-list {
		list-style-type: none;
		/* 移除列表项的小点 */
		padding: 0;
		/* 移除默认的内边距 */
		margin: 0;
		/* 移除默认的外边距 */
		display: flex;
		/* 使用 flexbox 使列表水平排列 */
	}

	.list-item {
		margin-right: 10px;
		/* 在列表项之间添加一些间距 */
	}


	.top {
		width: 100%;
		height: 360rpx;
		background-image: url("../../../static/8c7398129c13f67abeca14982fc8883.jpg");
	}
</style>